<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // // get 请求
        // const xhr = new XMLHttpRequest();
        // xhr.open('GET', '/api', false);
        // xhr.onreadystatechange = function () {
        //     // 这里的函数异步执行，可参考之前 JS 基础 中的异步模块
        //     if (xhr.readyState === 4) {
        //         if (xhr.status === 200) {
        //             alert(xhr.responseText);
        //         };
        //     };
        // };
        // xhr.send(null);

        // '/data/test.json'


        // 初始化一个XMLHttpRequest的实例:GET
        const xhr = new XMLHttpRequest();
        // false 是指异步的请求，前两者应该是交互的方式和位置
        xhr.open('GET', './data/test.json', true)
        // 回调函数，当实例的状态改变的时候，触发这么一个函数
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    alert(xhr.responseText);

                    // 把值变成JSON格式
                    console.log(JSON.parse(xhr.responseText));
                } else {
                    console.log('其他情况');
                }
            }
        }
        // 因为get请求，不需要发送数据
        xhr.send(null);



        // 初始化一个XMLHttpRequest的实例:POST
        const xhr = new XMLHttpRequest();
        xhr.open('POST', './login', true)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    alert(xhr.responseText);
                } else {
                    console.log('其他情况');
                }
            }
        }
        const postData = {
            username: 'zhangsan',
            password: '123456'
        }

        // post请求
        // 把JSON格式文本转换为字符串格式
        xhr.send(JSon.stringify(postData));
    </script>
</body>

</html>